<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="标题" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <ant-input-search
          :options="options"
          :Show="Show"
          @ChangeDown="ChangeDown"
          :InputSearch="InputSearch"
        />
      </a-form-item>
      <a-form-item label="path" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input
          v-decorator="[
          'path',
          {rules: [{ required: true, message: '请输入路径' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input
          v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="authentication" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input
          v-decorator="[
          'authentication',
          {rules: [{ required: true, message: '请输入' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="颜色" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <div class="selectColor">
          <colorPicker style="margin-right:10px" v-model="selectColor" />
          <a-input
            placeholder="输入颜色"
            size="large"
            v-decorator="['color']"
            @change="ColorInputChange"
          ></a-input>
        </div>
      </a-form-item>
      <a-form-item label="图标" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input-search
          placeholder="请选择或输入图标编码"
          v-decorator="['icon',{rules:[{required:true,messgae:'请输入图标或者选择编码'}]}]"
          @search="SelectIcon"
          size="large"
        >
          <a-button slot="enterButton" icon="setting"></a-button>
        </a-input-search>
      </a-form-item>
      <a-form-item label="排序" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input-number style="width:100%" :min="1" v-decorator="['sort']" />
      </a-form-item>
      <a-form-item label="Weight" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-radio-group @change="RadioChange" v-decorator="['radio-group']">
          <a-radio value="1">有</a-radio>
          <a-radio value="0">没有</a-radio>
        </a-radio-group>
        <div v-if="ShowWeight">
          <a-button @click="ClickWeight" type="primary" icon="smile">查看 Weight</a-button>
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 4 }">
        <a-button type="primary" html-type="submit">添加</a-button>
      </a-form-item>
    </a-form>
    <!-- 图片列表展示 -->
    <a-modal :width="600" centered title="图标列表" v-model="Icon" @ok="chooseIcon">
      <div>
        <a v-for="(item,index) in iconList" @click="chooseASingle(item)" :key="index">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{item}}</span>
            </template>
            <icon-font class="iconfont" :type="item" />
          </a-tooltip>
        </a>
      </div>
    </a-modal>
    <!-- 显示查看Weight -->
    <a-modal title="操作" :width="700" v-model="visible" @ok="handleOk">
      <open-weight @Submit="Submit" />
    </a-modal>
  </div>
</template>
<script lang="ts">
const OpenWeight = () => import("./OpenWeight.vue").then(m => m.default || m);
import Setting from "../../../utils/setting";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component({
  name: "sys-module-details",
  layout: "menu",
  components: {
    OpenWeight
  }
})
export default class SysModuleDetailss extends Vue {
  @Prop({
    type: Array,
    required: true,
    default: () => {
      return [];
    }
  })
  selectData!: string[];
  form: any = {};
  options: object = {
    zh: "",
    mn: "",
    en: ""
  };
  iconList: string[] = Setting.iconfont;
  Icon: boolean = false;
  selectColor: string = "#ccc";
  InputSearch: string = "";
  IconSingle: string = "";
  ShowWeight: boolean = false;
  Show: boolean = false;
  //openWeight
  visible: boolean = false;
  created() {
    const _this: any = this;
    _this.form = _this.$form.createForm(this);
    setTimeout(() => {
      this.form.setFieldsValue({
        ["color"]: this.selectColor,
        ["radio-group"]: "0"
      });
    }, 0);
  }
  ChangeDown(n: object) {
    this.options = n;
    this.InputSearch = JSON.stringify(n);
    this.Show = !this.Show;
  }
  ColorInputChange(val: any) {
    this.selectColor = val.target.value;
  }
  SelectIcon() {
    this.Icon = true;
  }
  chooseIcon() {
    this.form.setFieldsValue({ ["icon"]: this.IconSingle });
    this.Icon = false;
  }
  chooseASingle(val: string) {
    const _this: any = this;
    this.IconSingle = val;
    _this.$message.success(`选择: ${val}`);
  }
  RadioChange(e: any) {
    console.log(e.target.value);
    if (e.target.value == 1) {
      this.ShowWeight = true;
      return;
    }
    this.ShowWeight = false;
  }
  ClickWeight() {
    this.visible = true;
  }
  Submit(val: object) {
    console.log(val, "88");
  }
  handleOk() {
    // this.visible = false;
  }
  handleSubmit(e) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  }
  @Watch("selectColor")
  newselectColor(n: string, o: string) {
    this.form.setFieldsValue({ ["color"]: n });
  }
  @Watch("selectData")
  gainSelectData(newData: string[], oldData: string[]) {
    console.log(newData, "newData");
  }
}
</script>
<style lang="less" scoped>
.selectColor {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-content: center;
}
.iconfont {
  font-size: 30px;
  width: 50px;
  margin-top: 20px;
  margin-right: 10px;
}
</style>